<template>
  <div>
    <form action="/">
      <van-search
          v-model="valueSearch"
          show-action
          :placeholder='this.businessName'
          input-align="center"
          @search="onSearch"
          @cancel="onCancel"
      />
    </form>
  </div>
  <div class="business-list">
    <van-card
        :title="business.businessName"
        :desc="'起送 ¥'+business.starPrice+' 配送 约 ¥'+business.deliveryPrice"
        :thumb="business.businessImg"
        @click="$router.push(`/business/detail?businessId=${business.businessId}`)"
    >
      <template #tags>
        <van-tag plain type="primary" style="color: #fa6d31;background-color: #fdefab">{{ business.businessExplain }}</van-tag>
        <van-tag plain type="primary" style="color: #fa6d31;background-color: #fdefab">精选好店</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
import { showToast } from "vant";

export default {
  name: "list",
  data() {
    return {
      businessName: '',
      business: {},
    }
  },
  methods: {
    _initBusinessList() {
      axios.get(`/ele_server_war/business/search?businessName=${ this.businessName }`).then(({ data : res }) => {
        if (res.status === 0){
          this.business = res.data
          console.log(this.business)
        } else {
          alert(res.message)
        }
      })
    },
    onSearch() {
      this.$router.push(`/business/listSearched?businessName=${ this.valueSearch }`)
    },
    onCancel(){
      this.$router.push(`/business/list`)
    }
  },
  created() {
    this.businessName = this.$route.query.businessName;
    this._initBusinessList()
  },
  setup() {
    const valueSearch = ref('');
    return { valueSearch };
  },
}
</script>

<style scoped lang="stylus">

</style>